<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform过渡</title>
    <style type="text/css">
        div[id^="transition"]{
            width: 100px;
            height: 100px;
            background-color: #8fb432;
            margin: 20px;
            transform: rotate(90deg);
        }
        #transition-ease{
            transition: transform 1s ease,
            bacground-color 1s ease;
        }
        #transition-linear{
            transition: transform 1s linear,
            bacground-color 1s linear;
        }
        #transition-ease-in{
            transition: transform 1s ease-in,
            bacground-color 1s ease-in;
        }
        #transition-ease-out{
            transition: transform 1s ease-out,
            bacground-color 1s ease-out;
        }
        #transition-ease-in-out{
            transition: transform 1s ease-in-out,
            bacground-color 1s ease-in-out;
        }
        div[id^="transition"]:hover{

            background-color: #acb451;
        }
    </style>
</head>
<body>
<div id="transition-ease"></div>
<div id="transition-linear"></div>
<div id="transition-ease-in"></div>
<div id="transition-ease-out"></div>
<div id="transition-ease-in-out"></div>
</body>
</html>